<!-- 水产品种占比饼图 -->
<template>
  <div class="aquaticBreedChart" ref="aquaticBreedChart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    // 当前市场所有水产品信息
    tableData: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      seriesData: [],  // 水产品交易统计数据
      currentPies: [], // 饼图的数据
    };
  },
  created () {
    this.currentTableData()
  },
  methods: {
    // 当前市场所有水产品信息
    currentTableData () {
      // console.log('饼图：当前市场所有水产品信息',this.tableData);
      let pieS = []
      this.tableData.forEach((v) => {
        // console.log('***', v);
        let obj = { name: '', value: '', unitName: '' }
        obj.name = v.goodsName           // 水产品名称
        obj.value = v.totalSales         // 总销量
        obj.unitName = v.unitName  // 水产品单位
        // console.log('obj***',obj);
        pieS.push(obj)
      })
      this.currentPies = pieS
      // console.log('当前的pieS',pieS);
    },

    // 水产品种占比饼图
    aquaticBreedChart () {
      let machart = echarts.init(this.$refs.aquaticBreedChart);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function (data) {
            return (data['name'] + '<br/>' + data.percent.toFixed(1) + '%' + '<br/>' + data['value'] + '&nbsp' + '(' + data['data'].unitName + ')') // 字符串结构
          }
        },
        legend: {
          top: "0",
          left: "center",
          itemWidth: 20,
          itemGap: 10,            // 图例之间的间隔
          icon: "rectangle",
          textStyle: {
            fontSize: 14,
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            name: "水产品种占比",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "70%"], // 饼图左右上下位置
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 4,
              borderColor: "#fff",
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
              borderWidth: 12, //大小设置
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight:'900'
                }
              },
              formatter: function (data) {
                return (data['name'] + data.percent.toFixed(1) + '%' + '\n' + data['value'] + '(' + data['data'].unitName + ')')
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.currentPies,
          },
        ],
      };
      machart.setOption(option);
    },
  },
  mounted () {
    this.aquaticBreedChart(); // 水产品种占比饼图,
  },
  watch: {

  }
};
</script>

<style lang="scss" scoped>
.aquaticBreedChart {
  /* width: 100%; */
  // height: 260px;
  /* overflow: auto; */
  // overflow-x: scroll;
  width: 100%;
  height: 100%;
}
</style>